<template>
  <div class="UserDetails">
    <div class="search">
      <el-input
        style="width: 300px"
        clearable
        placeholder="请输入内容"
        v-model="id"
      >
        <template slot="prepend">ID</template>
      </el-input>
      <el-button class="btn" @click="search">搜索</el-button>
    </div>
    <el-radio-group v-model="active" @change="search" fill="#7b94d8">
      <el-radio-button label="1">资料详情</el-radio-button>
      <el-radio-button label="2">送礼详情</el-radio-button>
      <el-radio-button label="3">直播记录</el-radio-button>
      <el-radio-button label="4">粉丝详情</el-radio-button>
    </el-radio-group>
    <el-card>
      <Details :id="id" ref="Details" v-if="active == 1"></Details>
      <SendGift :id="id" ref="SendGift" v-if="active == 2"></SendGift>
      <LiveRecording v-if="active == 3"></LiveRecording>
      <Fans v-if="active == 4"></Fans>
    </el-card>
  </div>
</template>

<script>
import Details from "./components/Details";
import SendGift from "./components/SendGift.vue";
import LiveRecording from "./components/LiveRecording.vue";
import Fans from "./components/Fans.vue";
export default {
  components: { Details, SendGift, LiveRecording, Fans },
  data() {
    return {
      id: "",
      active: "1",
    };
  },
  methods: {
    search() {
      switch (this.active) {
        case "1":
          this.$refs.Details.search();
          break;
        case "2":
          this.$refs.SendGift.search();
          break;
      }
    },
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.$nextTick(() => {
        this.search();
      });
    }
  },
};
</script>

<style lang="less" scoped>
.UserDetails {
  padding: 20px;
  .search {
    margin-bottom: 20px;
  }
}
</style>